<template>
  <div class="setting">
    <div class="card">
      <div class="title">展示图标</div>
      <div class="content">
        <el-form-item label="状态">
          <el-radio-group v-model="settingData.show">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="悬浮样式">
          <el-radio-group v-model="settingData.mode">
            <el-radio :label="1">垂直</el-radio>
            <el-radio :label="2">水平</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示名称">
          <el-radio-group v-model="settingData.isText">
            <el-radio :label="0">不显示</el-radio>
            <el-radio :label="1">显示</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </div>
    <dc-list
      v-model="settingData.list"
      :itemProp="{ src: '', url: '', title: { text: '', color: '' } }"
    >
      <template #title>功能图标</template>
      <template #listItem="{ element }">
        <el-form-item label="按钮图片">
          <div class="sa-flex">
            <sa-uploader v-model="element.src" fileType="image"></sa-uploader>
            <span class="tip">建议尺寸：80*80</span>
          </div>
        </el-form-item>
        <el-form-item label="按钮名称">
          <dc-text-color
            v-model="element.title"
            maxlength="4"
            showWordLimit
            placeholder="请输入按钮名称"
          ></dc-text-color>
        </el-form-item>
        <el-form-item label="按钮链接">
          <dc-url v-model="element.url"></dc-url>
        </el-form-item>
      </template>
    </dc-list>
  </div>
</template>

<script setup>
  import dcList from '../../common/dc-list.vue';
  import dcUrl from '../../common/dc-url.vue';
  import dcTextColor from '../../common/dc-text-color.vue';

  const props = defineProps(['settingData']);
</script>
